<template>
	<view class="main">
		<view class='rotateCtn'  v-if="!userInfo.isMineInfo">
			<!--正面的框 -->
			<view :class="[frontClass, 'font-frame']" :style="{height: `calc(100vh - ${statusBarHeight}px)`}"
				v-if="showView == '1'">
				<view class="home-content">
					<view style="display: flex; justify-content: center; padding-top: 80px;">
						<u--image :showLoading="true" :src="userInfo.avatar" width="100px" height="100px"
							:radius="50"></u--image>
					</view>
					<view class="content">
						<view class="name">吕越</u-icon></view>
						<view class="c_info">
							<u-icon custom-prefix="tips-icon-dianhua" size="30"></u-icon>{{userInfo.company}}
						</view>
						<view class="c_info">{{userInfo.school}}{{userInfo.title}}</view>
					</view>
					<view class="ver-line">
					</view>
					<view class="contact-item">
						<view class="item">
							<text class="tips-icon tips-icon-youjian"></text>
							<text class="contact-item__value">{{userInfo.email}}</text>
						</view>
						<view class="item">
							<text class="tips-icon tips-icon-daohang"></text>
							<text class="contact-item__value">{{userInfo.address}}</text>
						</view>
					</view>
				</view>
				<view style="margin-top: 20px; margin: 50px 30px 0 30px;">
					<u-button color="#737E8D" text="了解更多" @click="rotateFn()"></u-button>
				</view>
			</view>
			<!--背面的框  -->
			<view :class="[backClass, 'back-frame']" v-else>
				<info-card-info :userInfo="userInfo"></info-card-info>
			</view>
		</view>
		<view v-else>
				<info-card-info :userInfo="userInfo"></info-card-info>
		</view>
	</view>
</template>

<script>
	import infoCardInfo from './infoCardInfo.vue'
	export default {
		components: {
			infoCardInfo
		},
		data() {
			return {
				statusBarHeight: "",
				showView: "1",
				frontClass: 'z1', //默认正面在上面
				backClass: 'z2',
				frontImg: "https://www.icloud-plat.com/files/business-card/cardHome.png",
				userInfo: {
					id: '1',
					avatar: "https://www.icloud-plat.com/files/lvyue.png", //头像
					name: "吕越", //姓名
					title: "执行院长", //职务
					school: "全球创新与治理研究院", //职称
					phone: "130-5116-6190", //手机号
					company: "对外经济贸易大学", //公司
					email: "nklvyue@126.com", //邮箱
					wechat: "nklvyue", //微信号
					// wechatCode: "http://www.icloud-plat.com/files/business-card/cardHome.png", //微信号
					address: "北京市朝阳区惠新东街10号",
					longitude: 116.407222, //经度
					latitude: 39.984167, //纬度
				},
				shareUserInfo: {
					id: '2',
					avatar: "https://www.icloud-plat.com/files/lvyue.png", //头像
					name: "吕越1", //姓名
					title: "执行院长", //职务
					school: "全球创新与治理研究院", //职称
					phone: "130-5116-6190", //手机号
					company: "对外经济贸易大学", //公司
					email: "nklvyue@126.com", //邮箱
					wechat: "nklvyue", //微信号
					address: "北京市朝阳区惠新东街10号",
					longitude: 116.407222, //经度
					latitude: 39.984167, //纬度
				},
				isMineInfo: false
			}
		},
		onReady() {
			const that = this;
			uni.getSystemInfo({
			    success: function (res) {
					that.statusBarHeight = res.windowTop//状态栏高度
					console.log(res.windowTop);
			    }
			});
		},
		onLoad(options) {
			uni.hideTabBar();
			if (JSON.stringify(options) != '{}') {
				this.userInfo.isMineInfo = this.userInfo.id == options.shareUserInfo.id;
				this.userInfo = options.shareUserInfo;
			}
		},
		onShow() {},
		methods: {
			rotateFn: function(e) {
				var that = this;
				// if (this.frontClass == 'z1' && this.backClass == 'z2') {
				this.frontClass = "front";
				this.backClass = "back";
				setTimeout(function() {
					this.frontClass = "z2";
					this.backClass = "z1";
					that.showView = 2;
				}, 1000);
				// } else {
				// 	this.frontClass = "back";
				// 	this.backClass = "front";
				// 	setTimeout(function() {
				// 		this.frontClass = "z1";
				// 		this.backClass = "z2";
				// 	}, 1000);
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rotateCtn {
		width: 100%;
		transform-style: preserve-3d;
		// position: relative;
	}

	.font-frame {
		// position: absolute;
		background-image: url("");
		width: 100vw;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.back-frame {
		// position: absolute;
	}

	.front {
		animation: front 1s linear 1;
		backface-visibility: hidden;
	}

	.back {
		animation: back 1s linear 1;
	}

	@keyframes front {
		from {
			// transform: rotateY(0deg);
			opacity: 1;
			transition: opacity 1s ease-in-out;
		}

		to {
			// transform: rotateY(180deg);
			opacity: 0;
		}
	}

	@keyframes back {
		from {
			// transform: rotateY(-180deg);
			opacity: 0;
		}

		to {
			// transform: rotateY(0deg);
			opacity: 1;
		}
	}

	.z1 {
		// z-index: 99;
		opacity: 1;
	}

	.z2 {
		// z-index: 5
		opacity: 0;
	}

	.home-content {
		color: #fff;

		.name {
			padding-top: 60x;
			font-size: 25px;
			font-weight: 900;
			color: #fff;
			text-align: center;
			line-height: 40px;
		}

		.content {
			padding-top: 50px;
			text-align: center;
			font-size: 20px;

			.c_info {
				display: block;
				max-width: 100%;
				padding-top: 25px;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 25px;
				white-space: nowrap;
			}
		}
		
		.ver-line{
		  position: relative;
		  height: 40px;
		  margin: 10px;
		}
		
		.ver-line::after {
		  content: '';
		  position: absolute;
		  left: 50%;
		  top: 0;
		  bottom: 0;
		  width: 2px;
		  background-color: #fff;
		}

		.contact-item {
			font-size: 20px;
			text-align: center;

			.item {
				padding-top: 15px;
			}

			.tips-icon {
				font-size: 25px;
				padding-right: 10px;
			}
		}
	}
</style>